html, body{
    height: 100%;
    background-color: #eaece5;
}

.container{
    display: none;
}

.loader{
    position: absolute;
    height: 80px;
    width: 80px;
    top: 50%;
    left: 50%;
    margin-top: -40px;
    margin-left: -40px;
}

.slide {
    margin: 0px auto;
    text-align: center;
    position: fixed;
    top: 0;
    overflow: hidden;
}
.slide .centerJs {
    position: absolute;
    z-index: 1;
    left: 50%;
}

/*UNO*/
.uno {
    background-color: #eaece5;
    width: 100%;
    display: block;
}

/*DOS*/
.dos {
    background-color: #E52757;
    width: 100%;
    height: 0;
    display: block;
}

/*TRES*/
.tres {
    background-color: #30A2B2;
    width: 100%;
    display: none;
}

/*CUATRO*/
.cuatro {
    background-color: #b777bc;
    width: 100%;
    display: none;
}

/*CINCO*/
.cinco {
    background-color: #eed23b;
    width: 100%;
    display: none;
}

/*SEIS*/
.seis {
    background-color: #bdd583;
    width: 100%;
    display: none;
}

/*SIETE*/
.siete {
    background-color: #f1ede5;
    width: 100%;
    display: none;
}

/*OCHO*/
.ocho {
  background-color: #fff;
  width: 100%;
  display: none;
}
.ocho .centerGusto {
  margin: 0px auto;
  max-width: 700px;
}
.ocho .centerGusto img {
  width: 80%;
  height: auto;
}
.ocho .centerComparti {
  margin: 0px auto;
  max-width: 290px;
  margin-top: 50px;
}
.ocho .centerComparti img {
  width: 100%;
  height: auto;
}
.ocho .redes-sociales {
  width: 220px;
  margin: 50px auto;
  height: 22px;
}
.ocho .fb-like {
  float: left;
}
.ocho .tw-wrap {
  float: left;
  margin-left: 8px;
}
.ocho .iconos-redes {
  width: 350px;
  margin: 50px auto;
}
.ocho .iconos-redes .icono {
  width: 50px;
  height: 50px;
  float: left;
  margin-right: 50px;
}
.ocho .iconos-redes .icono a {
  display: block;
  width: 100%;
  height: 100%;
}


.pngImg{
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    max-width: 560px;
    height: 180px;
    z-index: 9999;
    left: 50%;
    top: 50%;
    margin-top: -90px;
    margin-left: -280px;
}

.png2 {
    background-image: url('../content/pngs/02.png');
}
.png3 {
    background-image: url('../content/pngs/03.png');
}

.png4 {
    background-image: url('../content/pngs/04.png');
}

.png5{
    background-image: url('../content/pngs/05.png');
}

.png6 {
    background-image: url('../content/pngs/06.png');
}


/*MEDIAS*/
@media only screen and (max-width: 580px) {
    .pngImg{
        background-size: 60%;
    }
}
